<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-03-13 22:00:15
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-09-27 15:57:22
 * @FilePath: \dance\components\z-course-card\z-course-card.vue
 * @Description: 这是一个课程卡片
-->
<template>
  <view class="card">
    <view class="card-cover">
      <view @click="onGoDetail" :class="['Lesson', 'OnlineLesson'].includes(data.classify) ? 'card-cover-video' : 'card-cover-image'">
        <m-video
          autoplay
          muted
          :loop="autoLoop"
          :controls="false"
          :show-speed-rate-btn="false"
          :src="data.video.dynamicCover"
          token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
          @ended="videoEndFn"
                      object-fit="cover"
          v-if="autoVideo"
        />
        <uv-image
          :src="
            isFileType(data.video.address) === 'image'
              ? data.video.address
              : data.video.cover || defaultImagesList[$uv.random(0, defaultImagesList.length - 1)]
          "
          height="100%"
          width="100%"
          v-else
        ></uv-image>
        <view class="popup"></view>
      </view>
      <view class="card-cover-shoucang" @click="httpCollect">
        <image
          :src="data.collected.id === 0 ? '../../static/img/shoucang.png' : '../../static/img/shoucang-click.png'"
          style="width: 100%; height: 100%"
          mode="aspectFill"
        />
      </view>
      <template v-if="['Lesson', 'OnlineLesson'].includes(data.classify)">
        <view class="card-cover-progress" @click="showDialog" v-if="data.classify === 'OnlineLesson' || Number(data.lesson?.personage) !== 1">
          <!-- <f-progress-dashboard :percentage="getPercentage(data.lesson?.grade)"></f-progress-dashboard> -->
          <image
            :src="defaultProgressImgs[(data.grade || 1) - 1]"
            style="width: 100%; height: 100%"
            mode="aspectFill"
            v-if="data.classify === 'OnlineLesson'"
          />
          <image :src="defaultProgressImgs[data.lesson.grade - 1]" style="width: 100%; height: 100%" mode="aspectFill" v-else />
        </view>
      </template>
    </view>
    <!-- 1是老师发布的课程 -->
    <view class="card-image" v-if="Number(data.lesson?.personage) === 1 || data.classify === 'Video'">
      <text class="name" v-if="data.lesson?.name">{{ data.lesson?.name }}</text>
      <text class="name" v-if="data.title && data.classify === 'Video'">{{ data.title }}</text>
      <text class="username">{{ data.teacher?.username || '无' }}</text>
      <view class="image" @click="onGoTeacher">
        <uv-avatar :src="data.teacher?.profilePhoto || defaultImages[2]" size="85rpx" mode="aspectFill"></uv-avatar>
      </view>
    </view>
    <!-- 这个是线上课 -->
    <view class="card-video" @click="onGoDetail" v-else-if="data.classify === 'OnlineLesson'">
      <view class="popup">
        <text class="lesson" :style="{ marginBottom: '51rpx', fontSize: '28rpx', fontWeight: '700' }">{{ data.lesson?.name }}</text>
      </view>
    </view>
    <view class="card-video" @click="onGoDetail" v-else>
      <view class="popup">
        <text class="week">{{ data.week || '无数据' }}</text>
        <text class="lesson">{{ data.lesson?.name }}</text>
        <text class="merchant" v-if="data.lesson?.merchant?.id">
          {{ data.lesson.merchant.headquater.name }}
          <template v-if="data.lesson?.merchant?.name">({{ data.lesson?.merchant?.name }})</template>
        </text>
        <text class="merchant" v-else>无地址</text>
      </view>
    </view>
    <uv-toast ref="toastRef"></uv-toast>
  </view>
  <f-dialog-card v-model="dialog" v-if="dialog"></f-dialog-card>
</template>

<script>
  export default {
    options: {
      virtualHost: true
    }
  };
</script>
<script setup>
  import { ref, defineProps, toRefs, defineEmits } from 'vue';
  import { defaultImages, defaultImagesList, defaultProgressImgs } from '@/common/js/global.js';
  import { isFileType, getPercentage } from '@/common/js/fn.js';
  let toastRef = ref();
  let emits = defineEmits(['onCollect', 'onVideoEnd']);
  const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    autoVideo: {
      type: Boolean,
      default: false
    },
    autoLoop: {
      type: Boolean,
      default: false
    }
  });
  const { data } = toRefs(props);
  const dialog = ref(false);

  const onGoDetail = () => {
    if (data.value.classify === 'Video') {
      uni.$uv.route({
        url: '/pages/teacher/videoPreview',
        params: {
          id: data.value.id
        }
      });
      return;
    } else if (data.value.classify === 'OnlineLesson') {
      uni.$uv.route({
        url: '/pages/online/index',
        params: {
          id: data.value.id
        }
      });
      return;
    }
    uni.$uv.route({
      url: '/pages/main/course',
      params: {
        id: data.value.id
      }
    });
  };
  const onGoPreview = () => {
    uni.$uv.route({
      url: '/pages/main/coursePreview',
      params: {
        id: data.value.timetable.id
      }
    });
  };
  const onGoTeacher = () => {
    uni.$uv.route({
      url: '/pages/me/share',
      params: {
        id: data.value.teacher.id
      }
    });
  };

  const showDialog = () => {
    dialog.value = true;
  };
  // 收藏
  let httpCollect = async () => {
    await uni.$uv.http.post(`app/collect/${!data.value.collected.id ? 'add' : 'cancel'}`, {
      classify: data.value.classify, //收藏类型
      objid: data.value.id, //收藏对象的数据ID
      optype: 'collect' //操作类型
    });
    emits('onCollect', data.value.id, data.value.collected.id ? 0 : 1);
    toastRef.value.show({
      overlay: false,
      message: `${data.value.collected.id ? '' : '取消'}收藏成功`,
      type: 'success'
    });
  };
  // 视频播放完成
  const videoEndFn = () => {
    emits('onVideoEnd');
  };
</script>

<style lang="scss" scoped>
  .card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 551rpx;
    font-size: 24rpx;
    &-cover {
      position: relative;
      // margin-bottom: 12rpx;
      width: 100%;
      &-video {
        border-radius: 17rpx;
        overflow: hidden;
        height: 100%;
        width: 100%;
      }
      &-image {
        border-radius: 17rpx;
        overflow: hidden;
        height: 485rpx;
        width: 100%;
        position: relative;
        .popup {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 331rpx;
          border-bottom-right-radius: 17rpx;
          border-bottom-left-radius: 17rpx;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        }
      }
      &-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 78rpx;
        height: 78rpx;
        filter: drop-shadow(9rpx 9rpx 18rpx black);
      }
      &-shoucang {
        position: absolute;
        right: 16rpx;
        top: 26rpx;
        width: 45rpx;
        height: 45rpx;
      }
      &-progress {
        position: absolute;
        top: -10rpx;
        left: -30rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
      }
      &-tab {
        width: 126rpx;
        height: 59rpx;
        line-height: 59rpx;
        text-align: center;
        background-color: #ff7a66;
        border-radius: 17rpx 0 52rpx 0;
        font-size: 26rpx;
        color: #fff;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    &-video {
      width: 100%;
      position: absolute;
      bottom: 0;

      .popup {
        width: 100%;
        height: 331rpx;
        border-bottom-right-radius: 17rpx;
        border-bottom-left-radius: 17rpx;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      .week {
        display: block;
        font-size: 28rpx;
        font-weight: 700;
        z-index: 2004;
        margin-bottom: 6rpx;
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
      }
      .lesson {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-bottom: 6rpx;
        font-size: 28rpx;
        z-index: 2004;
      }
      .merchant {
        text-shadow: 0px 2rpx 7rpx rgba(0, 0, 0, 0.5);
        margin-bottom: 12rpx;
        font-size: 24rpx;
        z-index: 2004;
      }
    }
    &-image {
      font-size: 24rpx;
      .name {
        position: absolute;
        left: 13rpx;
        bottom: 80rpx;
        padding: 9rpx 24rpx;
        border-radius: 24rpx;
        color: #fff;
      }
      .username {
        position: absolute;
        right: 98rpx;
        bottom: 14rpx;
      }
      .image {
        position: absolute;
        right: -9rpx;
        bottom: 9rpx;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
